<template>
  <div class="w-full h-full">
    <n-button @click="handleAddShow">添加</n-button>
    <vxe-grid v-bind="gridOptions" @edit-disabled="editDisabledEvent" class="mt-10px">
      <template #operation="{ row }">
        <n-button v-bind="row" @click="handleAddRow(row)"> {{ row.label }} </n-button>
      </template>
    </vxe-grid>
    <div>
      <n-button
        v-for="(item, index) in gridOptions.data"
        v-bind="item"
        :key="index"
        @click="handleAddRow()"
        class="mt-10px"
        >{{ item.label }}</n-button
      >
    </div>
    <code>{{ gridOptions.data }}</code>
    <el-dialog v-model="addShow" v-bind="dialogNature" :before-close="handleCancel">
      <CCForm :forms="state.forms" :params="state.params"></CCForm>
      <el-row :gutter="20" v-if="state.params.componentType">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <CCForm
            :forms="computedForms(state.params.componentType)"
            :params="computedParams(state.params.componentType)"
          ></CCForm>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <n-button
            v-if="state.params.componentType === 'button'"
            v-bind="computedParams(state.params.componentType)"
            v-text="computedParams(state.params.componentType).label"
          ></n-button>
          <n-input
            v-if="state.params.componentType === 'input'"
            v-bind="computedParams(state.params.componentType)"
          ></n-input>
          <!-- <CCForm :forms="resultForms()" :params="resultParams({})"></CCForm> -->
        </el-col>
      </el-row>

      <template #footer>
        <el-button @click="handleSubmit" type="primary">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from "vue"
import { VxeGridProps, VxeGridEvents } from "vxe-table"
import CCForm from "@/components/cc-element/CCForm/index.vue"
import { forms, params, inputForms, inputParams, buttonForms, buttonParams } from "@/views/study/staticData/index.tsx"

import _ from "lodash-es"

interface RowVO {
  [key: string]: any
}

const computedForms = computed(() => {
  return (type) => {
    return type === "button" ? state.buttonForms : state.inputForms
  }
})
const computedParams = computed(() => {
  return (type) => {
    return type === "button" ? state.buttonParams : state.inputParams
  }
})
const resultForms = (itemType = state.params.componentType) => {
  return [
    {
      itemType: itemType,
      label: itemType,
      ...computedParams
    }
  ]
}
const resultParams = (params = {}) => {
  return {}
}

const addShow = ref(null)
const dialogNature = ref({
  title: "添加",
  width: "50%",
  draggable: true,
  center: true
})

const handleAddShow = () => {
  addShow.value = true
}

const handleSubmit = () => {
  addShow.value = false
}
const handleCancel = () => {
  addShow.value = false
}

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  showOverflow: true,
  editConfig: {
    trigger: "click",
    mode: "row"
    // beforeEditMethod({ columnIndex }) {
    //   if (columnIndex === 1) {
    //     return false
    //   }
    //   return true
    // }
  },
  columns: [
    { type: "seq", width: 50 },
    { field: "", title: "操作", slots: { default: "operation" }, width: 100, fixed: "right" },
    {
      field: "attrType",
      title: "标签类型",
      editRender: {
        name: "VxeSelect",
        props: {},
        options: [
          { label: "button", value: "button" },
          { label: "submit", value: "submit" },
          { label: "reset", value: "reset" }
        ]
      },
      minWidth: 160
    },
    {
      field: "block",
      title: "是否显示为块级",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      },
      minWidth: 160
    },
    {
      field: "bordered",
      title: "是否显示 border",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      },
      minWidth: 160
    },
    {
      field: "circle",
      title: "是否是圆按钮",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      },
      minWidth: 160
    },
    {
      field: "color",
      title: "按钮颜色",
      minWidth: 160,
      editRender: {
        name: "VxeInput",
        props: { size: "mini" }
      }
    },
    {
      field: "dash",
      title: "是否是虚线",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "disabled",
      title: "是否禁用",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "focusable",
      title: "是否镂空",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "ghost",
      minWidth: 160,
      title: "是否是镂空按钮",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "iconPlacement",
      title: "按钮图标位置",
      minWidth: 160,
      editRender: {
        name: "VxeSelect",
        props: {},
        options: [
          { label: "left", value: "left" },
          { label: "right", value: "right" }
        ]
      }
    },
    {
      field: "loading",
      title: "是否是加载按钮",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "quaternary",
      title: "是否是四级按钮",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "round",
      minWidth: 160,
      title: "是否是圆角按钮",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "size",
      minWidth: 160,
      title: "按钮大小",
      editRender: {
        name: "VxeSelect",
        props: {},
        options: [
          { label: "mini", value: "mini" },
          { label: "small", value: "small" },
          { label: "medium", value: "medium" },
          { label: "large", value: "large" }
        ]
      }
    },
    {
      field: "secondary",
      minWidth: 160,
      title: "是否是次要按钮",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "strong",
      title: "按钮文字是否加粗",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "tertiary",
      minWidth: 160,
      title: "是否是三级按钮",
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "text",
      title: "是否是文字按钮",
      minWidth: 160,
      editRender: {
        name: "VxeSwitch",
        props: { size: "mini", openLabel: "是", openValue: true, closeLabel: "否", closeValue: false }
      }
    },
    {
      field: "label",
      title: "按钮文字",
      minWidth: 160,
      editRender: {
        name: "VxeInput",
        props: { type: "text" }
      }
    },
    {
      field: "textColor",
      title: "按钮文字颜色",
      minWidth: 160,
      editRender: {
        name: "VxeInput",
        props: { size: "mini" }
      }
    },
    {
      field: "type",
      title: "按钮类型",
      minWidth: 160,
      editRender: {
        name: "VxeSelect",
        props: {},
        options: [
          { label: "tertiary", value: "tertiary" },
          { label: "success", value: "success" },
          { label: "info", value: "info" },
          { label: "primary", value: "primary" },
          { label: "warning", value: "warning" },
          { label: "error", value: "error" }
        ]
      }
    }
  ],
  data: [
    {
      attrType: "button", //按钮的 DOM 的 type 属性
      block: false, //按钮是否显示为块级
      bordered: true, //按钮是否显示 border
      circle: false, //是否是圆角按钮
      color: "", //按钮颜色
      dash: false, //是否是虚线
      disabled: false, //按钮是否禁用
      focusable: false, //按钮是否焦距
      ghost: false, //按钮是否透明
      iconPlacement: "left", //按钮图标位置
      loading: false, //是否是加载按钮
      quaternary: false, //是否是四级按钮
      round: false, //是否是圆角按钮
      size: "medium", //按钮大小
      secondary: false, //是否是次要按钮
      strong: false, //按钮文字是否加粗
      tertiary: false, //是否是三级按钮
      text: false, //
      label: "添加", // 按钮文字
      textColor: "", // 按钮文字颜色
      type: "primary", // 按钮类型
      disabled: false, // 是否禁用
      onClick: () => {
        console.log("按钮")
      },
      id: 1
    }
  ]
})
const state = reactive({
  row: { id: "1" },
  forms,
  params,
  inputForms,
  inputParams,
  buttonForms,
  buttonParams
})

const editDisabledEvent: VxeGridEvents.EditDisabled = () => {
  console.log("禁止编辑")
}
const handleAddRow = (row) => {
  state.row = row
  let deepCloneRow = _.cloneDeep(row)
  deepCloneRow.id = _.random(4, 50000000)
  gridOptions.data.push(deepCloneRow)
  console.log(gridOptions.data, "gridOptions.data")
}
const buttonList = ref([
  {
    attrType: "button", //按钮的 DOM 的 type 属性
    block: false, //按钮是否显示为块级
    bordered: true, //按钮是否显示 border
    circle: true, //是否是圆角按钮
    color: "", //按钮颜色
    dash: false, //是否是虚线
    disabled: false, //按钮是否禁用
    focusable: true, //按钮是否镂空
    ghost: false, //按钮是否透明
    iconPlacement: "left", //按钮图标位置
    loading: false, //是否是加载按钮
    quaternary: false, //是否是四级按钮
    round: false, //是否是圆角按钮
    size: "medium", //按钮大小
    secondary: "secondary", //是否是次要按钮
    strong: false, //按钮文字是否加粗
    tertiary: false, //是否是三级按钮
    text: false, //
    label: "按钮", // 按钮文字
    textColor: "", // 按钮文字颜色
    type: "primary", // 按钮类型
    disabled: false, // 是否禁用
    onClick: () => {
      console.log("按钮")
    }
  }
])
const handleTypeSelectChange = ({ value }) => {
  console.log(value)
}
onMounted(() => {
  state.forms[0].changeSelect = handleTypeSelectChange
})
</script>
